<template>
  <v-container class="mt-10 d-flex justify-center" style="max-width: 1500px">
    <div
      v-if="boxListData"
      class="box-card"
      style="max-width: 90%; margin: 0 auto;display: flex; justify-content: space-between; align-items: center"
    >
   <div style="display: flex; justify-content: space-between; align-items: center">
    <div>
                 <img src="@/static/img/set/online.png" alt="" />
    </div>
    <div style="margin-left: 1rem;">
        <div>22222</div>
        <div>在线人数</div>
    </div>
   </div>
    <div style="display: flex; justify-content: space-between; align-items: center">
    <div>
         <img src="@/static/img/set/session.png" alt="" />
    </div>
    <div style="margin-left: 1rem;">
        <div>22222</div>
        <div>总比赛场次</div>
    </div>
   </div>
    <div style="display: flex; justify-content: space-between; align-items: center">
    <div>
         <img src="@/static/img/set/player.png" alt="" />
    </div>
    <div style="margin-left: 1rem;">
        <div>22222</div>
        <div>玩家</div>
    </div>
   </div>
    </div>
  </v-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, computed } from "vue";
import ActivityCard from "@/components/activity-card/Index.vue";
import ActivityNotice from "@/components/activity-notice/Index.vue";
import BoxCard from "@/components/box-card/Index.vue";
import { useStore } from "@/store";

// import {activityList, boxList} from './data'
import BoxService from "@/services/BoxService";
import WelfareBoxService from "@/services/WelfareBoxService";
import _ from "lodash";
import {useRouter} from "vue-router";

export default defineComponent({
  name: "Csgo",
  components: {
    ActivityCard,
    ActivityNotice,
    BoxCard,
  },
  setup() {
    const router = useRouter();
    const store = useStore()
    store.dispatch("getRechargeWelfareBoxTypeId")
    
    const state = reactive({
      boxListData: [],
      recharge_welfare_box_type_id: computed(() => store.getters.rechargeWelfareBoxTypeId),
      rechargeWelfareboxList: [],
    });
    console.log('111',state)
    const getBoxList = async () => {
      const types = await getBoxAllType();

      const list: any[] = [];
      for(let i = 0; i < types.length; i++) {
        const item = types[i];
        if (item.id == state.recharge_welfare_box_type_id) {
          continue
        }
        const res = await BoxService.list({type_id: item.id, page: 1, page_size: 24});
        list.push({
          sort: item.sort,
          name: item.name,
          ...res.data.data,
        });
      };

      state.boxListData = _.sortBy(list, o => o.sort);
    };

    const getBoxAllType = async () => {
      const res = await BoxService.allType();
      return res.data.data;
    };

    onMounted(async() => {
      await getBoxList();
      await getRechargeWelfareBoxList();
    });

    async function getRechargeWelfareBoxList() {
      const resp = await WelfareBoxService.rechargeWelfareBoxList({
        disabled: 0,
        sorts: "+amount"
      })
      const { data: {list, total} } = resp.data
      console.log(list,'list')
      state.rechargeWelfareboxList = list
    }

    const currentChange = async (val) => {
      const res = await BoxService.list({
        page_size: state.page_size,
        page: val,
      });
      state.boxListData = res.data.data;
    };

    return {
      ...toRefs(state),
      currentChange,
      handleToHistory() {
        router.push("/csgo/history");
      },
    };
  },
});
</script>

<style lang="scss" scoped>

.box-card {
  left: 78px;
top: 1303px;
width: 1284px;
height: 112px;
opacity: 1;
border-radius: 16px;
background: rgba(0, 0, 0, 0.1);
padding: 5rem;
border: 1px solid rgba(63, 63, 77, 1);
}
</style>
